<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";
import myAxios from "@/plugins/myAxios.ts";
import type {userType} from "@/model/user";
import cardAxios from "@/plugins/cardAxios.ts";
import {showFailToast, showSuccessToast} from "vant";

const user = ref();
const card = ref<userType>();
const cardData = ref("");
const router = useRouter();
onMounted(async () => {
  const res = await getCurrentUser();
  // @ts-ignore
  if (res?.code === 40100 || res.data == null) {
    router.push({
      path: '/phone',
      replace: true,
    });
  }
  // @ts-ignore
  if (res.code === 200) {
    user.value = res.data
  }
})


onMounted(async () => {
  const res = await myAxios.get('/current')
  // @ts-ignore
  if (res?.code === 40100 || res.data == null || res?.code !== 200) {
    router.push({
      path: '/phone',
      replace: true,
    });
  }
  // @ts-ignore
  if (res.code === 200) {
    card.value = res.data
    if (res.data.ubankcard !== null) {
      show.value = false;
    } else {
      show.value = true;
    }
  }
})

const fingerInfor = ref<userType>();
onMounted(async () => {
      const res = await cardAxios.get('/finder')
      // @ts-ignore
      if (res?.code === 40100 || res.data == null) {
        showFailToast('未关联学号');
      }
      // @ts-ignore
      else if (res?.code === 200 && res.data) {
        fingerInfor.value = res.data
      }
      // @ts-ignore
      else if (res?.code === 50001 && resxuewh.data) {
        showFailToast('校园卡卡号或其他信息不完整');
      } else {
        showFailToast('校园卡卡号或其他信息不完整');
      }
    }
);
const show = ref(false);
const show2 = ref(false);
const state = reactive({
  show: false,
  cardList: [] as userType[],
  formattedDate: '',
});
const updateStatusToFind = () => {
  show2.value = true;
};

const handleConfirm = async () => {
  const res = await cardAxios.post('/close', {
    uid: card.value?.uid
  });
// @ts-ignore
  if (res?.code === 40100 || res.data == null) {
    showFailToast('未关联学号');
  }
// @ts-ignore
  else if (res?.code === 200 && res.data) {
    showSuccessToast('发布成功');
    window.location.reload();
  }
// @ts-ignore
  else if (res?.code === 50001 && res.data) {
    showFailToast('校园卡卡号或其他信息不完整');
  } else {
    showFailToast('校园卡卡号或其他信息不完整');
  }
};

const handleConfirm2 = () => {
  router.push('/add/card');
}
const confirmButtonColor = ref('#F9752D');
const cancelButtonColor = ref('black');
</script>

<template>
  <div class="card">
    <div class="card-header">
      <span>校园卡（{{ card?.uid }}）</span>
      <div class="card-chip">晋中学院</div>
    </div>
    <div class="card-number">
      <span>****</span> <span>****</span> <span>****</span>
      <span>{{ card?.ubankcard }}</span>
    </div>
    <div class="card-balance">持卡人：{{ card?.uname }}</div>
    <div class="card-down">
      <div class="card-cvv">
        <van-tag :type="card?.bankcardStatus === 1 ? 'danger' : 'success'">
          {{ card?.bankcardStatus === 1 ? '丢失' : '正常' }}
        </van-tag>
      </div>

      <div class="card-button">

        <van-button type="primary" size="mini" color="#F9752D" is-link to="update">更新校园卡</van-button>
      </div>
    </div>

  </div>
  <div class="notice">
    <van-notice-bar text="完善的校园卡信息可以提高匹配率"/>
  </div>
  <div class="swz-container">

    <div class="swz">
      <div v-if="fingerInfor?.uid!=null">
        <div class="visit-details">
          <p style="font-size: 20px;text-align: center;padding-bottom: 10px">联系拾卡者</p>
          <div style="padding-left: 10px">
            <p style="font-size: 16px;padding-top: 3px"><strong>姓名：</strong>{{ fingerInfor?.uname }}</p>
            <p style="font-size: 16px;padding-top: 3px"><strong>班级：</strong>{{ fingerInfor?.uclass }}</p>
            <p style="font-size: 16px;padding-top: 3px"><strong>手机号：</strong>{{ fingerInfor?.uphone }}</p>
          </div>
        </div>
        <div style="font-size: 12px;text-align:center;padding-left: 10px;padding-top: 10px;color:#C3C3C3 ">
          <p><strong>失主信息只展示姓名或手机号的一种</strong></p>
        </div>
      </div>
      <div v-if="fingerInfor?.uid==null" style="text-align: center">
        暂无拾卡人信息
      </div>
    </div>
    <div class="huifu-button" v-if="fingerInfor?.uid!=null">
      <van-button color="#FAA152" type="primary" size="small" @click="updateStatusToFind">关闭丢失模式</van-button>
    </div>
  </div>

  <div class="footer">
    <p style="font-size: 12px">用户信息仅用于联系拾卡者/失主</p>
    <p>uc:{{ card?.uc }}</p>
  </div>
  <van-dialog v-model:show="show2" title="确认关闭丢失模式" show-cancel-button @confirm="handleConfirm"
              :confirm-button-color="confirmButtonColor" :cancel-button-color="cancelButtonColor">
    <div style="text-align: left;padding: 10px">
      <p>
        <van-divider :style="{ color: '#F9752D', borderColor: '#F9752D', padding: '0 16px' }">注意</van-divider>
      </p>
      <p>（一）系统停止检索拾卡用户</p>
      <p>（三）您的校园卡将恢复正常</p>
    </div>
  </van-dialog>
  <van-dialog v-model:show="show" title="补充校园卡信息提示" show-cancel-button confirm-button-text="补充"
              cancel-button-text="关闭" @confirm="handleConfirm2" :confirm-button-color="confirmButtonColor"
              :cancel-button-color="cancelButtonColor">
    <div style="text-align: left;padding: 10px">
      <p style="text-align: center">您暂未绑定校园卡号码！</p>
      <p>
        <van-divider :style="{ color: '#F9752D', borderColor: '#F9752D', padding: '0 16px' }">注意</van-divider>
      </p>
      <p>（一）提前绑定匹配成功率高达80%</p>
      <p>（二）绑定可以获得丢卡预警功能</p>
      <p>（三）绑定会持续检索可能的拾卡用户</p>
      <p>（四）校卡帮承诺校园卡信息会加密保护</p>
    </div>
  </van-dialog>
</template>

<style scoped>

.card {
  width: 320px;
  background: linear-gradient(to right, #FFB1AB, #FFFFCA);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 13px;
}

.card-number {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333333;
}

.card-number span {
  margin-right: 5px;
}

.card-cvv {
  font-size: 14px;
  margin-bottom: 5px;
  color: #666666;
}

.card-chip {
  margin-bottom: 20px;
}

.card-down {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
  font-size: 12px;
}

.card-balance {
  margin-bottom: 15px;
}

.notice {
  margin: 10px auto 0px auto;
  width: 320px;
}

.swz-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px;
}

.swz {
  width: 300px;
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.swz:hover {
  transform: scale(1.05);
}

.footer {
  padding: 10px;
  text-align: center;
  color: #C3C3C3; /* 浅灰色文字颜色 */
  font-size: 14px;
  position: fixed;
  bottom: 50px;
  left: 0;
  width: 100%;
}

.huifu-button {
  text-align: center;
}
</style>